<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest() {
        /* 不同的浏览器对于创建XMLHttpRequest提供不同的支持。 */
        try {
            xmlHttp = new XMLHttpRequest();//火狐
        } catch (tryMS) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//ie浏览器
            } catch (otherMS) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//ie浏览器
                } catch (failed) {
                    xmlHttp = null;
                    // 这里可以报一个错误，无法获得 XMLHttpRequest对象
                }
            }
        }
        return xmlHttp;
    }
    function loadJSON(method, url) {
        //1.创建XMLHttpRequest对象
        xmlHttp = createXMLHttpRequest();
        //2.将状态触发器绑定到一个函数。将getJson定义为状态回调函数。
        xmlHttp.onreadystatechange = getJson;
        //3.使用open方法建立与服务器的连接
        xmlHttp.open(method, url);
        //4.向服务器端发送数据
        //xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
        xmlHttp.send(null);
    }

    //5.在回调函数中对返回数据进行处理
    function getJson() {
        //因为ajax默认是异步调用的，在请求后台的同事，会继续执行js ajax后面的代码。
        // 所以每触发一次js-ajax函数，这里的代码就会被执行两次，要想不重复执行就放到if判断里面，
        // 只有判断后台返回成功了才执行。
        //alert("111111");
        //readyState:对象状态。0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                alert("2222")
                var json = xmlHttp.responseText;
                alert(json);
            } else if (xmlHttp.status == 404) {
                window.alert("404\n找不到路径");
            } else if (xmlHttp.status == 500) {
                alert("500\n服务器内部错误！");
            }
        }
    }
</script>
<body onload="loadJSON('post','updateDataPage.do')">
    <a href="#"><h1>Hello World !</h1></a>
</body>
</html>
